<template>
  <div>
    <a-row v-if="type != 2" style="margin: 15px 0 15px 0">
      <a-button type="info" @click="toList" class="d-a-center">返回</a-button>
    </a-row>
    <a-card style="" v-if="type == 1">
      <h3>订单信息</h3>
      <a-descriptions :column="1">
        <a-descriptions-item label="用户姓名">{{ datas.userName }}</a-descriptions-item>
        <a-descriptions-item label="用户ID">
          {{ datas.userId }}
        </a-descriptions-item>
        <a-descriptions-item label="联系方式"> {{ datas.mobile }}</a-descriptions-item>
        <a-descriptions-item label="服务名称"> {{ datas.serviceName }}</a-descriptions-item>
        <a-descriptions-item label="服务地址"> {{ datas.address }}</a-descriptions-item>
      </a-descriptions>
      <h3>护士信息</h3>
      <div v-if="!datas1">暂无</div>
      <a-descriptions v-else :column="1">
        <a-descriptions-item label="用户姓名">{{ datas1.nurseName }}</a-descriptions-item>
        <a-descriptions-item label="用户ID">
          {{ datas1.nurseId }}
        </a-descriptions-item>
        <a-descriptions-item label="联系方式"> {{ datas1.mobile }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <div v-if="type == 2">
      <a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" @change="onCheckAllChange"> 全部勾选 </a-checkbox>
    </div>
    <a-divider />
    <a-row>
      <a-col :span="8" :offset="2">
        <div class="group">
          <h3>服务态度</h3>
          <a-checkbox-group v-model:value="checkedList1" :options="options.visitReturn" />
        </div>
      </a-col>
      <a-col :span="8" :offset="2">
        <div class="group">
          <h3>专业知识</h3>
          <a-checkbox-group v-model:value="checkedList2" :options="options.visitKnowledge" /></div
      ></a-col>
    </a-row>
    <a-row>
      <a-col :span="8" :offset="2">
        <div class="group">
          <h3>服务规范</h3>
          <a-checkbox-group v-model:value="checkedList3" :options="options.visitNorm" />
        </div>
      </a-col>
      <a-col :span="8" :offset="2">
        <div class="group">
          <h3>推荐套餐</h3>
          <a-checkbox-group v-model:value="checkedList4" :options="options.recommendPackage" /></div
      ></a-col>
    </a-row>
    <a-row v-if="type == 2">
      <a-col :span="12" :offset="12">
        <h3>服务分值：{{ score }} 分</h3>
        <div class="wrap" style="display: flex">
          <div class="item">
            <div class="title">0-20分</div>
            <div class="value">极差</div>
          </div>
          <div class="item">
            <div class="title">21-40分</div>
            <div class="value">一般</div>
          </div>
          <div class="item">
            <div class="title">41-60分</div>
            <div class="value">良好</div>
          </div>
          <div class="item">
            <div class="title">61-80分</div>
            <div class="value">优秀</div>
          </div>
          <div class="item">
            <div class="title">81-100分</div>
            <div class="value">极好</div>
          </div>
        </div>
      </a-col>
    </a-row>

    <a-card style="margin-top: 15px">
      <a-form :rules="rules" :model="form" :hideRequiredMark="true" :label-col="labelCol" ref="formRef">
        <a-form-item name="interflowType" label="沟通情况">
          <a-select ref="select" v-model:value="form.interflowType" @focus="focus" @change="handleChange" placeholder="请选择">
            <a-select-option v-for="item in buyCar" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="remarks" label="备注">
          <a-textarea v-model:value="form.remarks" placeholder="请输入备注" :maxlength="500" allow-clear showCount />
        </a-form-item>
      </a-form>
    </a-card>
    <a-row v-if="type == 2" style="margin-top: 15px">
      <a-col :span="4" :offset="8">
        <a-button type="danger" @click="handleSave" class="d-a-center">保存</a-button>
      </a-col>
      <a-col :span="4" :offset="1">
        <a-button type="info" @click="toList" class="d-a-center">返回</a-button>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { reactive, ref, watch, computed, defineComponent, createVNode, toRefs } from 'vue'
import { CheckOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Modal, message } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import { saveVisitRecord, visitOrderDetail } from '@/api/buisness/index.js'
import CertificationDetail from '../components/CertificationDetail.vue'
import { deleteObjBlank } from '@/assets/js/common.js'
export default {
  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
    CertificationDetail
  },
  setup() {
    const formRef = ref('')
    let form = ref({})
    const router = useRouter()
    const route = useRoute()
    const data = reactive({
      loading: true,
      time: [],
      list: [],
      datas: '',
      datas1: '',
      visible: false,
      detailVisible: false, //详情弹窗
      isEdit: '', //查看审核
      id: '', //认证
      indeterminate: true,
      checkAll: false,
      type: 0, //1：查看 2：回访
      buyCar: [
        {
          name: '正常接通',
          id: 2
        },
        {
          name: '用户拒绝',
          id: 3
        },
        {
          name: '接通异常',
          id: 1
        }
      ],
      checkedList1: [],
      checkedList2: [],
      checkedList3: [],
      checkedList4: [],
      options: {}
    })
    const rules = {
      interflowType: [
        {
          required: true,
          message: '请选择'
        }
      ]
    }
    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 10,
      total: 0
    })

    const statusAct = ref(0) //状态激活

    // 状态列表
    const statusList = reactive([
      {
        title: '全部',
        status: 0
      },
      {
        title: '待审核',
        status: 1
      },
      {
        title: '已认证',
        status: 2
      },
      {
        title: '未通过',
        status: 3
      }
    ])
    // 选择时间
    const panelChange = (date, dateString) => {
      form.value.createdAtBegin = dateString[0]
      form.value.createdAtEnd = dateString[1]
    }
    const toList = () => {
      console.log('router', router)
      router.back()
    }
    // 查询
    const search = () => {
      if (Object.keys(form).length == 0) {
        message.warning('请输入你要搜索的内容！！！')
        return
      }
      deleteObjBlank(form)
      page.current = 1
      init()
    }

    const columns = [
      {
        title: '订单号',
        dataIndex: 'id',
        className: 'table',
        align: 'center'
      },
      {
        title: '用户姓名',
        dataIndex: 'realName',
        className: 'table',
        align: 'center'
      },
      {
        title: '用户id',
        dataIndex: 'id',
        className: 'table',
        align: 'center'
      },
      {
        title: '联系方式',
        dataIndex: 'realName',
        className: 'table',
        align: 'center'
      },
      {
        title: '服务名称',
        dataIndex: 'id',
        className: 'table',
        align: 'center'
      },
      {
        title: '完成时间',
        dataIndex: 'realName',
        className: 'table',
        align: 'center'
      },
      {
        title: '回访时间',
        dataIndex: '服务护士',
        className: 'table',
        align: 'center'
      },
      {
        title: '服务分数',
        dataIndex: 'realName',
        className: 'table',
        align: 'center'
      },
      {
        title: '服务标签',
        dataIndex: 'mobile',
        className: 'table',
        align: 'center'
      },
      {
        title: '回访状态',
        dataIndex: 'position',
        className: 'table',
        align: 'center'
      },
      {
        title: '状态',
        dataIndex: 'status',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'status'
        }
      },
      {
        title: '操作',
        dataIndex: 'operation',
        className: 'table',
        align: 'center',
        fixed: 'right',
        slots: {
          customRender: 'operation'
        }
      }
    ]
    const checkedList = computed(() => {
      return [...data.checkedList1, ...data.checkedList2, ...data.checkedList3, ...data.checkedList4]
    })
    const score = computed(() => {
      let val = 0
      checkedList.value.map((m, index) => {
        val += m > 19 ? 1 : 5
      })
      return val
    })
    const nurseStatusColor = computed(status => {
      return function (status) {
        if (status == 2) {
          return 'success'
        }
        if (status == 1) {
          return '#f50'
        }
        if (status == 3) {
          return 'error'
        }
      }
    })
    const nurseStatus = status => {
      let title = ''
      switch (status) {
        case 1:
          title = '待审核'
          break
        case 2:
          title = '已认证'
          break
        case 3:
          title = '未通过'
          break
      }
      return title
    }
    const onCheckAllChange = e => {
      data.checkedList1 = e.target.checked ? data.options.visitReturn.map(m => m.value) : []
      data.checkedList2 = e.target.checked ? data.options.visitKnowledge.map(m => m.value) : []
      data.checkedList3 = e.target.checked ? data.options.visitNorm.map(m => m.value) : []
      data.checkedList4 = e.target.checked ? data.options.recommendPackage.map(m => m.value) : []
      data.indeterminate = false
    }
    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ['10', '20', '30'],
      showTotal: (total, range) => {
        return '共' + total + '条'
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true
    }))

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, '当前分页')
      page.current = pagination.current
      page.pageSize = pagination.pageSize

      // 请求列表接口
      init()
    }
    const chooseStatus = (status, index) => {
      if (statusAct.value == index) return
      statusAct.value = index
      if (index == 0) {
        delete form.value['status']
      } else {
        form.value.status = status
      }
      page.current = 1
      init()
    }
    const handleOk = e => {
      visible.value = false
    }
    const closeModal = e => {
      router.go(-1)
    }
    const handleSave = () => {
      formRef.value.validate().then(async res => {
        // data.checkedList
        let arr = checkedList.value.map(m => {
          return { id: m }
        })
        saveVisitRecord({
          ...form.value,
          number: route.query.number,
          visitDictionaryDtos: [...arr]
        }).then(r => {
          if (r.success) {
            message.success('操作成功~')
            // router.go(-1)
            router.back()
          }
        })
      })
    }
    // 取消
    const cancle = () => {
      visible.value = false
    }
    const pass = () => {
      visible.value = false
    }
    // 查看
    const look = (key, isEdit) => {
      data.detailVisible = true
      data.isEdit = 0
      data.id = key
    }

    // 审核
    const deal = (key, isEdit) => {
      data.detailVisible = true
      data.isEdit = 1
      data.id = key
    }
    init()
    async function init() {
      data.type = route.query.type
      data.loading = true

      let res = await visitOrderDetail({
        number: route.query.number,
        type: route.query.type
      })
      if (res.success) {
        // 查看
        if (data.type == 1) {
          form.value = { ...res.object.visitCommitVo }
          data.myform = {
            ...res.object.visitCommitVo,
            ...res.object.visitOrderInfo
          }
        }
        let { visitReturn, visitNorm, visitKnowledge, recommendPackage } = res.object
        visitReturn = visitReturn.map(m => {
          return {
            label: m.describe,
            value: m.id
          }
        })
        visitNorm = visitNorm.map(m => {
          return {
            label: m.describe,
            value: m.id
          }
        })
        visitKnowledge = visitKnowledge.map(m => {
          return {
            label: m.describe,
            value: m.id
          }
        })
        recommendPackage = recommendPackage.map(m => {
          return {
            label: m.describe,
            value: m.id
          }
        })
        // data.checkedList1 = visitReturn.map(m =>  {
        //   return m.value
        // })
        // data.checkedList2 = visitKnowledge.map(m =>  {
        //   return m.value
        // })
        // data.checkedList3 = visitNorm.map(m =>  {
        //   return m.value
        // })
        // data.checkedList4 = recommendPackage.map(m =>  {
        //   return m.value
        // })
        // let arr  = [...visitReturn, ... visitNorm, ...visitKnowledge, ...recommendPackage]
        data.options = {
          visitReturn,
          visitNorm,
          visitKnowledge,
          recommendPackage
        }
        //  arr.map(m => {
        //   return {
        //     label:m.describe,
        //     value: m.id
        //   }
        // })
        data.datas = { ...res.object.visitOrderInfo }
        data.datas1 = { ...res.object.visitNurseInfo }
      }
    }
    watch(
      () => checkedList.value,
      val => {
        data.indeterminate = !!val.length && val.length < 24
        data.checkAll = val.length === 24
      }
    )
    return {
      ...toRefs(data),
      toList,
      formRef,
      form,
      score,
      rules,
      columns,
      pagination,
      statusList,
      handleTableChange,
      search,
      checkedList,
      deal,
      look,
      statusAct,
      panelChange,
      chooseStatus,
      labelCol: { style: { fontWeight: 'bolder', width: '100px' } },
      cancle,
      handleOk,
      pass,
      nurseStatusColor,
      nurseStatus,
      closeModal,
      onCheckAllChange,
      handleSave
    }
  }
}
</script>
<style scoped lang="less">
.search {
  background-color: #e6e6e6;
  padding-left: 20px;
  margin-bottom: 20px;
}
h3 {
  margin: 20px 0;
}
.wrap {
  display: flex;
  .item {
    margin-right: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
